<template>
	<view>
		<u-tabs :list="list" :current="current" inactive-color="#1E1E1E" active-color="#87C9C5" @change="change"></u-tabs>


		<view v-for="(item,index) in order">
			<p>{{index}}</p>
			<view class="uni-flex uni-row" style="margin-top: 10rpx;" v-for="(items,index) in item">
				<view style="margin-left:70rpx;margin-right:auto;">
					<view class="dot"></view>
					<view class="rectangle"></view>
				</view>
				<view v-if="items.status!=1" class="orderContent">
					<view class="state">
						<text v-if="items.status==0" style="color: #00A0E9;font-size: 35rpx;">未发货</text>
						<text v-if="items.status==1" style="color: #28896F;font-size: 35rpx;">待收货</text>
						<text v-if="items.status==2" style="color: #00A0E9;font-size: 35rpx;">已签收</text>
						<text v-if="items.status==3" style="color: #F39800;font-size: 35rpx;">未付款</text>
						<text v-if="items.status==4" style="color: #00A0E9;font-size: 35rpx;">订单关闭</text>
						<text v-if="items.status==5" style="color: #00A0E9;font-size: 35rpx;">退款中</text>
						<text v-if="items.status==6" style="color: #00A0E9;font-size: 35rpx;">退款成功</text>
						<text>{{items.date}}</text>
					</view>
					<view class="name">
						<text>商品名称：</text>
						<text>幸运盲盒好运如你同行</text>
					</view>
					<view class="number">
						<text>订单号：</text>
						<text>20200902011025</text>
					</view>
					
					<text class="buttn" v-if="items.status==0">提醒发货</text>
					<text class="buttn" v-if="items.status==3">关闭订单</text>

				</view>
				<view v-if="items.status==1" class="orderContents">
					<view class="state">
						<text v-if="items.status==1" style="color: #28896F;font-size: 35rpx;">待收货</text>
						<text>{{items.date}}</text>
					</view>
					<view class="name">
						<text>商品名称：</text>
						<text>幸运盲盒好运如你同行</text>
					</view>
					<view class="number">
						<text>订单号：</text>
						<text>20200902011025</text>
					</view>
					<view class="name" v-if="items.status==1">
						<text>快递公司：</text>
						<text>中通快递</text>
					</view>
					<view class="name" v-if="items.status==1">
						<text>快递单号：</text>
						<text>20200902011025</text>
					</view>
				
					<text class="buttn" v-if="items.status==1">查看物流</text>
					<text class="buttn" v-if="items.status==1">确认收货</text>
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部订单',
					type:'all'
				}, {
					name: '待付款',
					type:'obligation'
				}, {
					name: '待发货',
					type:'tosend'
				}, {
					name: '待收货',
					type:'waitsend'
				}, {
					name: '已完成订单',
					type:'accomplish'
				}],
				current: 0,
				type: "all",
				order: [],
			}
		},
		onLoad() {
			this.$api.getOrder(this.all).then(res => {
				this.order = res.data
				console.log(res.data)
			})
		},

		methods: {
			change(index) {
				this.current = index;
				this.$api.getOrder(this.list[index].type).then(res => {
					this.order = res.data
					console.log(res.data)
				})
			},
		}
	}
</script>

<style lang="scss">
	p {
		font-size: 40rpx;
		font-weight: bold;
		margin: 15rpx;
	}

	.orderContent {

		height: 280rpx;
		width: 560rpx;
		float: left;
		border: 1px #000;
		border-radius: 2em;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0px 5px 9px #D3D3D3;
		padding: 11rpx;
	}
	.orderContent2 {
	
		height: 380rpx;
		width: 560rpx;
		float: left;
		border: 1px #000;
		border-radius: 2em;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0px 5px 9px #D3D3D3;
		padding: 11rpx;
	}

	.state {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 18rpx 20rpx;

	}

	.name {

		margin: 18rpx 20rpx;
	}

	.number {

		margin: 18rpx 50rpx;
	}

	.buttn {
		height: 38rpx;
		width: 131rpx;
		background-color: #07D0D2;
		border-radius: 0.6em;
		color: #FFFFFF;
		margin-left: 140rpx;
		padding: 5rpx;
	}


	.dot {
		height: 16rpx;
		width: 16rpx;
		border-radius: 2em;
		background-color: #88C9C5;
	}

	.rectangle {

		height: 300rpx;
		width: 6rpx;
		margin-top: -2rpx;
		margin-left: 25%;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#b8c4cb, endColorStr=red);
		/*IE 6 7 8*/

		background: -ms-linear-gradient(top, #88C9C5, #FFFFFF);
		/* IE 10 */

		background: -moz-linear-gradient(top, #88C9C5, #FFFFFF);
		/*火狐*/

		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#88C9C5), to(#FFFFFF));
		/*谷歌*/

		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#88C9C5), to(#FFFFFF));
		/* Safari 4-5, Chrome 1-9*/

		background: -webkit-linear-gradient(top, #88C9C5, #FFFFFF);
		/*Safari5.1 Chrome 10+*/

		background: -o-linear-gradient(top, #88C9C5, #FFFFFF);
		/*Opera 11.10+*/
	}
</style>
